<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识盒子模型(Understanding the Box Model)</title>
  <!-- 
    CSS的盒子模型（Box Model）是指在网页中，每个元素都可以看作是一个矩形的盒子，这个盒子包含了内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
    这些部分分别影响着元素在页面中的布局和样式。以下是CSS盒子模型的主要要点： 
 
      1. 内容（Content）：指元素的实际内容，如文本、图片等。内容的宽度和高度可以通过CSS属性来控制。 
      2. 内边距（Padding）：指内容区域与边框之间的距离。可以使用padding属性来设置元素的内边距大小。 
      3. 边框（Border）：围绕在内容和内边距外的边框线。可以使用border属性来设置元素的边框样式、颜色和宽度。 
      4. 外边距（Margin）：指元素与其他元素之间的距离，用于控制元素之间的间隔。可以使用margin属性来设置元素的外边距大小。 
   -->
   <style>
     .box-model {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 5px solid black;
       margin: 10px;
     }
   </style>
</head>
<body>
  
  <div class="box-model">
    box-model
  </div>

</body>
</html>